<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NeueAdmin II - Marketing Dashboard</title>

<link rel="stylesheet" media="screen" href="css/reset.css" />
<link rel="stylesheet" media="screen" href="css/grid.css" />
<link rel="stylesheet" media="screen" href="css/style.css" />
<link rel="stylesheet" media="screen" href="css/messages.css" />
<link rel="stylesheet" media="screen" href="css/forms.css" />
<link rel="stylesheet" media="screen" href="css/tables.css" />

<!--[if lt IE 8]>
<link rel="stylesheet" media="screen" href="css/ie.css" />
<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/PIE.js"></script>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->

<!-- jquerytools -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.ui.min.js"></script>
<script type="text/javascript" src="js/jquery.tables.js"></script>
<script type="text/javascript" src="js/jquery.flot.js"></script>

<script type="text/javascript" src="js/global.js"></script>

<!-- THIS SHOULD COME LAST -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/ie.js"></script>
<![endif]-->

</head>
<body>
    <div id="wrapper">
        <header>
            <div class="clearfix">
                <div class="shortcuts">
                    <ul class="clearfix">
                        <li><a href="#" title="Monitor Activities"><img src="images/woofunction-icons/activity_monitor.png" /><span>Activity</span></a></li>
                        <li><a href="#" title="Add/Edit Contacts"><img src="images/woofunction-icons/address_book_32.png" /><span>Contacts</span><em>300</em></a></li>
                        <li><a href="#" title="View Recent Comments"><img src="images/woofunction-icons/comment_32.png" /><span>Comments</span></a><em>20</em></li>
                        <li><a href="#" title="View Recent Orders"><img src="images/woofunction-icons/basket_32.png" /><span>Orders</span><em>20</em></a></li>
                        <li><a href="#" title="Read Mail"><img src="images/woofunction-icons/email_32.png" /><span>Mail</span><em>4</em></a></li>
                        <li><a href="#" title="Send Newsletters"><img src="images/woofunction-icons/newspaper_32.png" /><span>Newsletters</span></a></li>
                        <li><a href="#" title="View Alerts"><img src="images/woofunction-icons/error_button.png" /><span>Alerts</span><em>20</em></a></li>
                        <li><a href="#" title="View Reports"><img src="images/woofunction-icons/chart_32.png" /><span>Reports</span></a></li>
                        <li><a href="#" title="Advanced Search"><img src="images/woofunction-icons/search_button_32.png" /><span>Search</span></a></li>
                        <li><a href="#" title="Add/Edit Users"><img src="images/woofunction-icons/user_32.png" /><span>Users</span><em>5</em></a></li>
                    </ul>
                </div>

                <div class="clear"></div>

                <a class="chevron fr">Expand/Collapse</a>
                <nav>
                    <ul class="clearfix">
                        <li class="active"><a href="dashboard.html">Dashboard</a></li>
                        <li><a href="forms.html">Forms &amp; Tables</a></li>
                        <li><a href="styles.html">Styles</a></li>
                        <li><a href="#" class="arrow-down">Dropdown</a>
                            <ul>
                                <li><a href="#">Submenu 1</a></li>
                                <li><a href="#">Submenu 2</a></li>
                                <li><a href="#">Submenu 3</a></li>
                                <li><a href="#">Submenu 4</a></li>
                            </ul>
                        </li>
                        <li class="fr action">
                            <a href="documentation/index.html" class="button button-orange help" rel="#overlay"><span class="help"></span>Help</a>
                        </li>
                        <li class="fr action">
                            <a href="#" class="has-popupballoon button button-blue"><span class="add"></span>New Contact</a>
                            <div class="popupballoon bottom">
                                <h3>Add new contact</h3>
                                First Name<br />
                                <input type="text" /><br />
                                Last Name<br />
                                <input type="text" /><br />
                                Company<br />
                                <input type="text" />
                                <hr />
                                <button class="button button-orange">Add contact</button>
                                <button class="button button-gray close">Cancel</button>
                            </div>
                        </li>
                        <li class="fr action">
                            <a href="#" class="has-popupballoon button button-blue"><span class="add"></span>New Task</a>
                            <div class="popupballoon bottom">
                                <h3>Add new task</h3>
                                <input type="text" /><br /><br />
                                When it's due?<br />
                                <input type="date" /><br />
                                What category?<br />
                                <select><option>None</option></select>
                                <hr />
                                <button class="button button-orange">Add task</button>
                                <button class="button button-gray close">Cancel</button>
                            </div>
                        </li>
                        <li class="fr"><a href="#" class="arrow-down">administrator</a>
                            <ul>
                                <li><a href="#">Account</a></li>
                                <li><a href="#">Users</a></li>
                                <li><a href="#">Groups</a></li>
                                <li><a href="#">Sign out</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        
        <section>
            <div class="container_8 clearfix">                

                <!-- Main Section -->

                <section class="main-section grid_8">

                    <!-- Statistics Section -->
                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix fr">
                                <li><a href="#" class="button button-gray no-text"><span class="wrench"></span></a></li>
                                <li><a href="documentation/index.html" class="button button-gray no-text help" rel="#overlay"><span class="help"></span></a></li>
                            </ul>
                            <h2>
                                Statistics
                            </h2>
                        </header>
                        <section class="container_6 clearfix">
                                <div class="grid_4 clearfix">
                                    <header class="clearfix">
                                    <ul class="fr action-buttons">
                                        <li><a href="#" class="current button button-gray no-text" title="Today's Stats"><span class="calendar-view-day"></span></a></li>
                                        <li><a href="#" class="button button-gray no-text" title="This Week's Stats"><span class="calendar-view-week"></span></a></li>
                                        <li><a href="#" class="button button-gray no-text" title="This Month's Stats"><span class="calendar-view-month"></span></a></li>
                                    </ul>
                                    <h3>Today's Stats</h3>
                                    </header>
                                    <section>
                                    <div class="grid_1 alpha">
                                        <div class="widget black ac">
                                            <header><h2>Orders</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Paid Invoices</h2></header>
                                            <section><h1>10</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Affiliate Signups</h2></header>
                                            <section><h1>30</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1 omega">
                                        <div class="widget black ac">
                                            <header><h2>Affiliate Orders</h2></header>
                                            <section><h1>50</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1 alpha">
                                        <div class="widget black ac">
                                            <header><h2>Tickets</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Offline Chats</h2></header>
                                            <section><h1>10</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Alerts</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1 omega">
                                        <div class="widget black ac">
                                            <header><h2>Errors</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    </section>
                                </div>

                                <!-- Progress Bars -->
                                <div class="grid_2">
                                    <h3>Goals</h3>
                                    <table class="simple full">
                                        <tr>
                                            <td style="width: 30%">Newsletters</td><td style="width: 10%" class="ar">20/100</td><td style="width: 60%"><div class="progress progress-red"><span style="width: 20%"><b>20%</b></span></div></td>
                                        </tr>
                                        <tr>
                                            <td>Leads</td><td class="ar">40/100</td><td><div class="progress progress-orange"><span style="width: 40%"><b>40%</b></span></div></td>
                                        </tr>
                                        <tr>
                                            <td>Blog Posts</td><td class="ar">60/100</td><td><div class="progress progress-blue"><span style="width: 60%"><b>60%</b></span></div></td>
                                        </tr>
                                        <tr>
                                            <td>Forum Posts</td><td class="ar">80/100</td><td><div class="progress progress-green"><span style="width: 80%"><b>80%</b></span></div></td>
                                        </tr>
                                    </table>
                                </div>
                                <!-- End Progress Bars -->
                        </section>
                    </div>
                    <!-- End Statistics Section -->

                    <!-- Analytics Section -->
                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix fr">
                                <li><a href="#" class="button button-gray no-text"><span class="wrench"></span></a></li>
                                <li><a href="documentation/index.html" class="button button-gray no-text help" rel="#overlay"><span class="help"></span></a></li>
                            </ul>
                            <h2>
                                Analytics
                            </h2>
                        </header>
                        <section class="sortable container_6 clearfix">
                                <div class="grid_2 widget-container" id="sortable-1" draggable="true">
                                    <h2 class="report-icon">Reporting Bar Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-bar" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-2" draggable="true">
                                    <h2 class="report-icon">Reporting Filled Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-filled" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-3" draggable="true">
                                    <h2 class="report-icon">Reporting Line Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-line" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-4" draggable="true">
                                    <h2 class="report-icon">Report Points Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-points" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-5" draggable="true">
                                    <h2 class="report-icon">Report Bar Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-bar2" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-6" draggable="true">
                                    <h2 class="report-icon">Report Line Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-line2" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                        </section>
                    </div>
                    <!-- End Analytics Section -->

                </section>

                <!-- Main Section End -->

            </div>
        </section>
    </div>
    
    <footer>
        <div id="footer-inner" class="container_8 clearfix">
            <div class="grid_8">
                <span class="fr"><a href="#">Documentation</a> | <a href="#">Feedback</a></span>Last account activity from 127.0.0.1 - <a href="#">Details</a> | &copy; 2010. All rights reserved. Theme design by VivantDesigns
            </div>
        </div>
    </footer>

    <div class="overlay-details" id="report-details">
        <header>
            <hgroup>
                <h2>Sample Details Table</h2>
                <h6>From January 01 to January 31, 2011</h6>
            </hgroup>
        </header>
        <section>
            <table class="datatable tablesort selectable paginate full">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Major</th>
                        <th>English</th>
                        <th>Calculus</th>
                        <th>Geometry</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th><th>Major</th><th>English</th><th>Calculus</th><th>Geometry</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Student01</td><td>Languages</td><td>80</td><td>75</td><td>80</td>
                    </tr>
                    <tr>
                        <td>Student02</td><td>Mathematics</td><td>90</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student03</td><td>Languages</td><td>85</td><td>80</td><td>85</td>
                    </tr>
                    <tr>
                        <td>Student04</td><td>Languages</td><td>60</td><td>100</td><td>100</td>
                    </tr>
                    <tr>
                        <td>Student05</td><td>Languages</td><td>68</td><td>95</td><td>80</td>
                    </tr>
                    <tr>
                        <td>Student06</td><td>Mathematics</td><td>100</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student07</td><td>Mathematics</td><td>85</td><td>90</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student08</td><td>Languages</td><td>100</td><td>90</td><td>85</td>
                    </tr>
                    <tr>
                        <td>Student09</td><td>Mathematics</td><td>80</td><td>65</td><td>75</td>
                    </tr>
                    <tr>
                        <td>Student10</td><td>Languages</td><td>85</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student11</td><td>Languages</td><td>86</td><td>100</td><td>100</td>
                    </tr>
                    <tr>
                        <td>Student12</td><td>Mathematics</td><td>100</td><td>70</td><td>85</td>
                    </tr>
                    <tr>
                        <td>Student13</td><td>Languages</td><td>100</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student14</td><td>Languages</td><td>50</td><td>55</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student15</td><td>Languages</td><td>95</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student16</td><td>Languages</td><td>100</td><td>30</td><td>70</td>
                    </tr>
                    <tr>
                        <td>Student17</td><td>Languages</td><td>80</td><td>55</td><td>65</td>
                    </tr>
                    <tr>
                        <td>Student18</td><td>Mathematics</td><td>30</td><td>55</td><td>75</td>
                    </tr>
                    <tr>
                        <td>Student19</td><td>Languages</td><td>68</td><td>88</td><td>70</td>
                    </tr>
                    <tr>
                        <td>Student20</td><td>Mathematics</td><td>40</td><td>40</td><td>80</td>
                    </tr>
                    <tr>
                        <td>Student21</td><td>Languages</td><td>50</td><td>100</td><td>100</td>
                    </tr>
                    <tr>
                        <td>Student22</td><td>Mathematics</td><td>100</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student23</td><td>Languages</td><td>85</td><td>80</td><td>80</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>

<script>
$(function () {
    /**
     * Charts and Graphs Setup
     */
    var options = {
        grid: { hoverable: true, clickable: true, labelMargin: 10, borderWidth: 1, borderColor: "#ccc" },
        colors: ["#0077FF"],
        shadowSize: 2,
	        xaxis: {
	            mode: null,
	            ticks: [
	                [1, "1"],
	                [2, "3"],
	                [3, "5"],
	                [4, "7"],
	                [5, "9"],
	                [6, "11"],
	                [7, "13"],
	                [8, "15"],
	                [9, "17"],
	                [10, "19"],
	                [11, "21"],
	                [12, "23"],
	                [13, "25"],
	                [14, "27"],
	                [15, "29"]
	            ]
	        }
    };

    var d1 = [[0, 3], [4, 8], [8, 5], [9, 13], [15, 12]];

    $.plot($("#reporting-bar"), [
        {
            data: d1,
            bars: { show: true }
        }
    ], options);

    $.plot($("#reporting-bar2"), [
        {
            data: d1,
            bars: { show: true }
        }
    ], options);

    $.plot($("#reporting-filled"), [
        {
            data: d1,
            lines: { show: true, fill: true }
        }
    ], options);

    $.plot($("#reporting-line"), [
        {
            data: d1,
            lines: { show: true }
        }
    ], options);

    $.plot($("#reporting-line2"), [
        {
            data: d1,
            lines: { show: true }
        }
    ], options);

    $.plot($("#reporting-points"), [
        {
            data: d1,
            lines: { show: true },
            points: { show: true }
        }
    ], options);

});
</script>

</body>
</html>
